<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
    <!-- 引入qs -->
    <script src="https://cdn.jsdelivr.net/npm/qs@6.9.3/dist/qs.js"></script>
    <!-- 引入自定义Js -->
    <script src="js/common.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box-card{
            width: 380px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>用户登录</span>
                <i class="el-icon-edit" style="float: right; padding: 3px 0"></i>
            </div>
            <div>
                <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="80px">
                    <el-form-item label="账号" prop="name">
                        <el-input type="text" v-model="loginForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="loginForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
                        <el-button @click="resetForm('loginForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                loginForm: {
                    name: '',
                    pass: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
                    ],
                    pass: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            },
            methods: {
                submitForm(formName) {
                    let vm = this
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            /*axios.post('/login', Qs.stringify(vm.loginForm))
                                .then(resp => {
                                    if(resp.data.success === false){
                                        this.$message(resp.data.errorMsg);
                                        return
                                    }
                                    window.location.href = "/"
                                })*/
                            $util.userLogin(vm.loginForm, function (resp) {
                                if(resp.data.success === false){
                                    vm.$message(resp.data.errorMsg);
                                    return
                                }
                                //保存用户信息并跳转
                                $util.saveUserInfo(resp.data.data)
                                window.location.href = "index.html"
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        })
    </script>
</body>
</html>
